Skip to content

fix: larger, centered, higher-contrast tablet player controls (#97) - #132

Merged
ProdigyV21 merged 1 commit into
mainfrom
fix/tablet-player-controls
Apr 5, 2026
Merged

fix: larger, centered, higher-contrast tablet player controls (#97)#132
ProdigyV21 merged 1 commit into
mainfrom
fix/tablet-player-controls

Conversation

@ProdigyV21

Copy link
Copy Markdown
Owner

Closes #97.

Three sub-bugs in the bottom controls row of PlayerScreen.kt:

  1. Buttons too small on tablet \u2014 if (isTouchDevice) ... else ... collapsed phone+tablet into one branch that was actually smaller than the TV branch (24 dp vs 28 dp). Replaced with a three-way when so tablet gets 36-48 dp buttons (meets Material 48 dp touch minimum), phone keeps compact 24-34 dp, TV unchanged at 28-38 dp.

  2. Off-center (far left) on tablet \u2014 Arrangement.Start left-aligned on every device. Tablet now centers the row; phone stays compact; TV keeps left-align for D-pad traversal.

  3. Invisible on bright content \u2014 the bottom gradient peaked at 70% alpha only at the very bottom and faded to ~20% near the top of the control column, making icons unreadable on white backgrounds. Touch devices now get a stronger gradient: 50% alpha at 20% height, 85% alpha at the bottom. TV unchanged.

All changes are inside the same Column that renders the bottom controls. No focus-traversal changes, no new callbacks, no behavior changes \u2014 just sizing, alignment, and gradient values. ~60 lines, single file.

See commit message for per-device size rationale and the root cause for each sub-bug.

on bright content (#97)

Reported: "On Android tablet the player controls are so small and on the
far left of the screen. It would be better to have them bigger and
centralized. Also if the video is bright white, it's very difficult to
see the controls, it would be nice to darken the gradient."

Three separate sub-bugs in PlayerScreen.kt around the bottom controls row:

1. Button sizes used `if (isTouchDevice) ... else ...` which collapsed
   phone and tablet into one branch. That branch used SMALLER buttons
   than TV (24 dp vs 28 dp) \u2014 backwards for tablet where viewing
   distance is short and finger targets must hit Material's 48 dp
   minimum. Tablets inherited the phone sizing and looked cramped.
2. `horizontalArrangement = Arrangement.Start` left-aligned the row on
   every device. TV remotes tolerate left alignment but on a 10"+
   tablet the icons cluster in the bottom-left corner with empty space
   to the right \u2014 exactly the "far left of the screen" complaint.
3. The bottom gradient peaked at `Color.Black.copy(alpha = 0.7f)` at
   the very bottom and faded out to 30% up. On bright white content
   the icons at the top of the control column sat on roughly 20%
   alpha, making them nearly invisible.

Changes (all scoped to the single bottom-controls Column, #97 only):

- Compute `isTablet` / `isPhone` from `LocalDeviceType.current` alongside
  the existing `isTouchDevice`, so the three device categories can be
  distinguished.
- Replace each button-size / icon-size / gap `if (isTouchDevice)`
  expression with a three-way `when` that gives tablets the LARGEST
  sizes (36-48 dp button, 22-30 dp icon), phones the compact sizes
  (24-34 dp button, 17-26 dp icon), and TV the original medium sizes
  unchanged. This makes tablet controls meet Material's 48 dp touch
  target minimum.
- Center the icon row on tablet (`Arrangement.Center`) instead of
  left-aligning. Phone keeps left-alignment because vertical orientation
  has limited horizontal space. TV keeps left-alignment because D-pad
  focus traversal assumes it.
- Strengthen the bottom gradient for touch devices only: starts at
  Color.Black 50% alpha at 20% and peaks at 85% alpha at the bottom.
  The old 70% peak wasn't enough on bright content; the new value makes
  icons readable on white backgrounds without being opaque enough to
  obscure the video entirely. TV keeps the lighter original gradient
  because TV content is usually not as bright as mobile photo/app
  backgrounds.

No behavioral or focus-traversal changes \u2014 buttons still respond to
the same D-pad / touch events, same focus requesters, same actions.

Closes #97
@ProdigyV21
ProdigyV21 merged commit c55c94e into main Apr 5, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI improvement] better player controls on tablet

1 participant